<template>
  <div class="connect_div">
    <div class="form_one">
      <div class="input_div">
        <p-input v-model="form.productNo" class="input" placeholder="请输入" />
        <span class="label">产品编号</span>
      </div>
      <div class="input_div">
        <p-input v-model="form.name" class="input" placeholder="请输入" />
        <span class="label">产品名称</span>
      </div>
      <div class="input_div">
        <SelectDefault v-model="form.type" class="input" code="product_type" />
        <span class="label">产品类型</span>
      </div>
      <div class="search_div" />
    </div>
    <div class="form_one">
      <div class="input_div">
        <p-input v-model="form.modelName" class="input" placeholder="请输入" />
        <span class="label">机种</span>
      </div>
      <div class="input_div">
        <SelectDefault v-model="form.form" class="input" code="product_from" />
        <span class="label">出货形态</span>
      </div>
      <div class="input_div">
        <SelectDefault
          v-model="form.state"
          class="input"
          code="product_status"
        />
        <span class="label">产品状态</span>
      </div>
      <div class="search_div">
        <p-button
          class="button"
          type="primary"
          style="height: 32px !important"
          @click="handleSearch"
        >
          搜索
        </p-button>
        <p-button
          class="button"
          style="height: 32px !important"
          @click="handleReset"
        >
          重置
        </p-button>
        <p-button
          class="button"
          style="height: 32px !important"
          @click="exportContractList"
        >
          导出
        </p-button>
      </div>
    </div>
  </div>
</template>

<script>
import monent from 'moment';

const defaultForm = {
  productNo: '',
  name: '',
  type: '',
  modelName: '',
  form: '',
  state: '',
};
export default {
  data() {
    return {
      form: { ...defaultForm },
      mode: ['date', 'date'],
      value: [],
    };
  },
  methods: {
    exportContractList() {
      this.$emit('down-contract-list');
    },
    handleSearch() {
      this.$emit('search', this.form);
    },
    handleChange(value) {
      console.log('value: ', value);
      this.value = value;
      this.form.contractTimeEnd =
        monent(value[1]).format('YYYY-MM-DD') + ' ' + '00:00:00';
      this.form.contractTimeStart =
        monent(value[0]).format('YYYY-MM-DD') + ' ' + '23:59:59';
    },
    handleReset() {
      this.form = { ...defaultForm };
      this.value = [];
      this.$emit('search', this.form);
    },
    // handlePanelChange2(value, mode) {
    //   console.log('mode: ', mode);
    //   this.value = value;
    //   this.mode2 = [
    //     mode[0] === 'date' ? 'month' : mode[0],
    //     mode[1] === 'date' ? 'month' : mode[1],
    //   ];

    // },
  },
};
</script>

<style lang="less" scope>
.connect_div {
  width: 100%;
  background-color: #f7f7f8;
  height: 90px;
  margin-bottom: 20px;
}

.form_one {
  width: 100%;
  height: 45px;
  display: flex;
  justify-content: space-around;
}
.input_div {
  width: 27%;
  line-height: 30px;
  margin-top: 7.5px;
}
.search_div {
  width: 19% !important;
  line-height: 30px;
  margin-top: 7.5px;
}

.input {
  width: 68% !important;
  float: right;
}
.label {
  float: right;
  margin-right: 10px;
}
.button {
  margin-left: 10px;
}
</style>